<template>
  <div>
    <div class="radios-box"> 
      <el-radio-group v-model="tabIndex" @change="jumpInfo">
        <el-radio-button :label="1" name="1">车辆基本信息</el-radio-button>
        <el-radio-button :label="2" name="2">部门员工信息</el-radio-button>
      </el-radio-group>
    </div>
    <div class="carInfo-container">
      <div class="car-container">
        <el-row>
          <el-col :span="24">
            <div style="margin: 20px 0 30px">
              <el-button size="mini" :disabled="!$store.getters.pageAuth.authoritySearch" @click="search">搜索</el-button>
              <el-button size="mini" :disabled="!$store.getters.pageAuth.authorityAdd" @click="add">增加</el-button>
              <el-button size="mini" :disabled="!$store.getters.pageAuth.authoritySearch" @click="refresh">重置</el-button>
              <el-button size="mini" :disabled="!$store.getters.pageAuth.authorityDown" @click="downloadExl">Excel下载</el-button>
              <excel-upload style="top: 10px; left: 10px" type="car"/>
            </div>
            <el-table
              :data="carSearchObj"
              :border="true"
              :header-cell-style="{background:'#eef1f6',color:'#606266'}"
              class="customTableStyle"
              style="font-size:12px;">
              <el-table-column
                label="编号"
                type="index"
                min-width="80">
              </el-table-column>
              <el-table-column
                label="最新车牌号"
                min-width="130">
                <template slot-scope="scope">
                  <el-select size="mini" filterable allow-create clearable v-model="scope.row.zxcph" placeholder="请选择">
                    <el-option
                      v-for="item in cpList"
                      :key="item.zxcph"
                      :label="item.zxcph"
                      :value="item.zxcph">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                label="车辆类型"
                min-width="100">
                <template slot-scope="scope">
                  <el-select size="mini" filterable clearable v-model="scope.row.cllx" placeholder="请选择">
                    <el-option
                      v-for="item in cartypeList"
                      :key="item.cllb"
                      :label="item.cllb"
                      :value="item.cllb">
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column
                label="车身颜色"
                min-width="80">
                <template slot-scope="scope">
                  <el-input size="mini" v-model="scope.row.csys" placeholder="请输入内容"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="注册（变更）日期"
                min-width="180">
                <template slot-scope="scope">
                  <el-date-picker
                    size="mini"
                    clearable
                    v-model="scope.row.zcrq[0]"
                    value-format="yyyy-M-d"
                    type="date"
                    class="datePicker"
                    placeholder="开始日期">
                  </el-date-picker>
                  <el-date-picker
                    size="mini"
                    clearable
                    v-model="scope.row.zcrq[1]"
                    value-format="yyyy-M-d"
                    type="date"
                    class="datePicker"
                    placeholder="结束日期">
                  </el-date-picker>
                </template>
              </el-table-column>
              <el-table-column
                label="交强险有效截止日期"
                min-width="180">
                <template slot-scope="scope">
                  <el-date-picker
                    size="mini"
                    clearable
                    v-model="scope.row.jqxyxjzrq[0]"
                    value-format="yyyy-M-d"
                    type="date"
                    class="datePicker"
                    placeholder="开始日期">
                  </el-date-picker>
                  <el-date-picker
                    size="mini"
                    clearable
                    v-model="scope.row.jqxyxjzrq[1]"
                    value-format="yyyy-M-d"
                    type="date"
                    class="datePicker"
                    placeholder="结束日期">
                  </el-date-picker>
                </template>
              </el-table-column>
              <el-table-column
                label="商业险有效截止日期"
                min-width="180">
                <template slot-scope="scope">
                  <el-date-picker
                    size="mini"
                    clearable
                    v-model="scope.row.syxyxjzrq[0]"
                    value-format="yyyy-M-d"
                    type="date"
                    class="datePicker"
                    placeholder="开始日期">
                  </el-date-picker>
                  <el-date-picker
                    size="mini"
                    clearable
                    v-model="scope.row.syxyxjzrq[1]"
                    value-format="yyyy-M-d"
                    type="date"
                    class="datePicker"
                    placeholder="结束日期">
                  </el-date-picker>
                </template>
              </el-table-column>
              <el-table-column
                label="危货险有效截止日期"
                min-width="180">
                <template slot-scope="scope">
                  <el-date-picker
                    size="mini"
                    clearable
                    v-model="scope.row.whxyxjzrq[0]"
                    value-format="yyyy-M-d"
                    type="date"
                    class="datePicker"
                    placeholder="开始日期">
                  </el-date-picker>
                  <el-date-picker
                    size="mini"
                    clearable
                    v-model="scope.row.whxyxjzrq[1]"
                    value-format="yyyy-M-d"
                    type="date"
                    class="datePicker"
                    placeholder="结束日期">
                  </el-date-picker>
                </template>
              </el-table-column>
              <el-table-column
                label="历史车牌号"
                min-width="100">
                <template slot-scope="scope">
                  <el-input size="mini" v-model="scope.row.lscph" placeholder="请输入内容"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="备注"
                min-width="80">
                <template slot-scope="scope">
                  <el-input size="mini" v-model="scope.row.bz" placeholder="请输入内容"></el-input>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                min-width="150">
                <template slot-scope="scope">
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              :total="page.totalCount"
              :page-size="page.pageSize"
              :current-page.sync="page.currPage"
              style="margin-top: 10px;"
              background
              layout="total, slot, prev, pager, next"
              @current-change="search">
               <span>—&nbsp;&nbsp;&nbsp;共 {{page.totalPage}} 页</span>
            </el-pagination>
            <div v-if="addVisi" style="margin-top: 20px">
              <el-row>
                <el-col :span="24">
                  <el-card class="box-card">
                    <div slot="header" class="clearfix">
                      <span>增加</span>
                      <el-button style="float: right; font-size:12px; padding: 7px 15px;margin-left:10px" type="text" @click="addClick">保存</el-button>
                      <el-button style="float: right; font-size:12px; padding: 7px 15px;" type="text" @click="addVisi = false">取消</el-button>
                    </div>
                    <div>
                    <el-table
                      :data="addCar"
                      :border="true"
                      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                      class="customTableStyle"
                      style="font-size:12px;">
                      <el-table-column
                      label="最新车牌号"
                      min-width="130">
                      <template slot-scope="scope">
                        <el-select size="mini" filterable allow-create clearable v-model="scope.row.zxcph" placeholder="请选择">
                          <el-option
                            v-for="item in cpList"
                            :key="item.zxcph"
                            :label="item.zxcph"
                            :value="item.zxcph">
                          </el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="车辆类型"
                      min-width="100">
                      <template slot-scope="scope">
                        <el-select size="mini" filterable clearable v-model="scope.row.cllx" placeholder="请选择">
                          <el-option
                            v-for="item in cartypeList"
                            :key="item.cllb"
                            :label="item.cllb"
                            :value="item.cllb">
                          </el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="车身颜色"
                      min-width="80">
                      <template slot-scope="scope">
                        <el-input size="mini" v-model="scope.row.csys" placeholder="请输入内容"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="注册（变更）日期"
                      min-width="180">
                      <template slot-scope="scope">
                        <el-date-picker
                          size="mini"
                          clearable
                          v-model="scope.row.zcrq"
                          value-format="yyyy-M-d"
                          type="date"
                          class="datePicker"
                          placeholder="选择日期">
                        </el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="交强险有效截止日期"
                      min-width="180">
                      <template slot-scope="scope">
                        <el-date-picker
                          size="mini"
                          clearable
                          v-model="scope.row.jqxyxjzrq"
                          value-format="yyyy-M-d"
                          type="date"
                          class="datePicker"
                          placeholder="选择日期">
                        </el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="商业险有效截止日期"
                      min-width="180">
                      <template slot-scope="scope">
                        <el-date-picker
                          size="mini"
                          clearable
                          v-model="scope.row.syxyxjzrq"
                          value-format="yyyy-M-d"
                          type="date"
                          class="datePicker"
                          placeholder="选择日期">
                        </el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="危货险有效截止日期"
                      min-width="180">
                      <template slot-scope="scope">
                        <el-date-picker
                          size="mini"
                          clearable
                          v-model="scope.row.whxyxjzrq"
                          value-format="yyyy-M-d"
                          type="date"
                          class="datePicker"
                          placeholder="选择日期">
                        </el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="历史车牌号"
                      min-width="100">
                      <template slot-scope="scope">
                        <el-input size="mini" v-model="scope.row.lscph" placeholder="请输入内容"></el-input>
                      </template>
                    </el-table-column>
                      </el-table>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
            <el-table
              :data="page.list"
              :border="true"
              :header-cell-style="{background:'#eef1f6',color:'#606266'}"
              highlight-current-row
              @row-click="rowClick"
              class="customTableStyle"
              style="width: 100%;font-size:12px;">
              <el-table-column
                label="编号"
                type="index"
                min-width="80">
              </el-table-column>
              <el-table-column
                label="最新车牌号"
                min-width="130">
                <template slot-scope="scope">
                  <div v-if="editVisi && scope.row.id == editCar.id">
                    <el-select size="mini" filterable clearable v-model="editCar.zxcph" placeholder="请选择">
                      <el-option
                        v-for="item in cpList"
                        :key="item.zxcph"
                        :label="item.zxcph"
                        :value="item.zxcph">
                      </el-option>
                    </el-select>
                  </div>
                  <div v-else>{{ scope.row.zxcph }}</div>
                </template>
              </el-table-column>
              <el-table-column
                label="车辆类型"
                min-width="100">
                <template slot-scope="scope">
                  <div v-if="editVisi && scope.row.id == editCar.id">
                    <el-select size="mini" filterable clearable v-model="scope.row.cllx" placeholder="请选择">
                      <el-option
                        v-for="item in cartypeList"
                        :key="item.cllb"
                        :label="item.cllb"
                        :value="item.cllb">
                      </el-option>
                    </el-select>
                  </div>
                  <div v-else>{{ scope.row.cllx }}</div>
                </template>
              </el-table-column>
              <el-table-column
                label="车身颜色"
                min-width="80">
                <template slot-scope="scope">
                  <div v-if="editVisi && scope.row.id == editCar.id">
                    <el-input size="mini" v-model="editCar.csys" placeholder="请输入内容"></el-input>
                  </div>
                  <div v-else>{{ scope.row.csys }}</div>
                </template>
              </el-table-column>
              <el-table-column
                label="注册（变更）日期"
                min-width="180">
                <template slot-scope="scope">
                  <div v-if="editVisi && scope.row.id == editCar.id">
                    <el-date-picker
                      v-model="editCar.zcrq"
                      value-format="yyyy-M-d"
                      type="date"
                      size="mini"
                      class="datePicker"
                      placeholder="选择日期">
                    </el-date-picker>
                  </div>
                  <div v-else>{{ scope.row.zcrq }}</div>
                </template>
              </el-table-column>
              <el-table-column
                label="交强险有效截止日期"
                min-width="180">
                <template slot-scope="scope">
                  <div v-if="editVisi && scope.row.id == editCar.id">
                    <el-date-picker
                      v-model="editCar.jqxyxjzrq"
                      value-format="yyyy-M-d"
                      type="date"
                      size="mini"
                      class="datePicker"
                      placeholder="选择日期">
                    </el-date-picker>
                  </div>
                  <div v-else>{{ scope.row.jqxyxjzrq }}</div>
                </template>
              </el-table-column>
              <el-table-column
                label="商业险有效截止日期"
                min-width="180">
                <template slot-scope="scope">
                  <div v-if="editVisi && scope.row.id == editCar.id">
                    <el-date-picker
                      v-model="editCar.syxyxjzrq"
                      value-format="yyyy-M-d"
                      type="date"
                      size="mini"
                      class="datePicker"
                      placeholder="选择日期">
                    </el-date-picker>
                  </div>
                  <div v-else>{{ scope.row.syxyxjzrq }}</div>
                </template>
              </el-table-column>
              <el-table-column
                label="危货险有效截止日期"
                min-width="180">
                <template slot-scope="scope">
                  <div v-if="editVisi && scope.row.id == editCar.id">
                    <el-date-picker
                      v-model="editCar.whxyxjzrq"
                      value-format="yyyy-M-d"
                      type="date"
                      size="mini"
                      class="datePicker"
                      placeholder="选择日期">
                    </el-date-picker>
                  </div>
                  <div v-else>{{ scope.row.whxyxjzrq }}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="earlyWarn"
                label="历史车牌号"
                min-width="100">
                <template slot-scope="scope">
                  <div v-if="editVisi && scope.row.id == editCar.id">
                    <el-input size="mini" v-model="editCar.lscph" placeholder="请输入内容"></el-input>
                  </div>
                  <div v-else>{{ scope.row.lscph }}</div>
                </template>
              </el-table-column>
              <el-table-column
                label="备注"
                min-width="80">
                <template slot-scope="scope">
                  <div v-if="editVisi && scope.row.id == editCar.id">
                    <el-input size="mini" v-model="editCar.bz" placeholder="请输入内容"></el-input>
                  </div>
                  <div v-else>{{ scope.row.bz }}</div>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                min-width="150">
                <template slot-scope="scope">
                  <div v-if="editVisi && scope.row.id == editCar.id">
                    <el-button size="mini" @click="editClick">保存</el-button>
                    <el-button size="mini" @click="editVisi = false">取消</el-button>
                  </div>
                  <div v-else>
                    <el-button :disabled="!$store.getters.pageAuth.authorityUpdate" size="mini" @click="edit(scope.row)">修改</el-button>
                    <el-button :disabled="!$store.getters.pageAuth.authorityDelete" size="mini" @click="deleteClick(scope.row.id)">删除</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <div v-if="activeCar.id" class="car-detail">
          <el-row style="padding-top:0px">
            <el-col :span="24">
              <el-row style="padding-top:0px">
                <div class="car-detail-title">
                  车辆行驶证信息
                </div>
                <el-form :inline="true" class="demo-form-inline">
                  <el-col :span="8">
                    <el-form-item label="档案编号">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.dabh" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.dabh }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="注册日期">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-date-picker
                          v-model="editCar.zcrq"
                          value-format="yyyy-M-d"
                          type="date"
                          size="mini"
                          class="datePicker"
                          placeholder="选择日期">
                        </el-date-picker>
                      </div>
                      <div v-else>{{ activeCar.zcrq }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="年审日期">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-date-picker
                          v-model="editCar.nsrq"
                          value-format="yyyy-M-d"
                          type="date"
                          size="mini"
                          class="datePicker"
                          placeholder="选择日期">
                        </el-date-picker>
                      </div>
                      <div v-else>{{ activeCar.nsrq }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="使用性质">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.syxz" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.syxz }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="强制报废日期">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-date-picker
                          v-model="editCar.qzbfrq"
                          value-format="yyyy-M-d"
                          type="date"
                          size="mini"
                          class="datePicker"
                          placeholder="选择日期">
                        </el-date-picker>
                      </div>
                      <div v-else>{{ activeCar.qzbfrq }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="报废年限">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.bfnx" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.bfnx }}</div>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
              <el-row  style="padding-top:0px">
                <div class="car-detail-title">
                  道路运输证信息
                </div>
                <el-form :inline="true" class="demo-form-inline">
                  <el-col :span="8">
                    <el-form-item label="道路运输证号">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.dlyszh" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.dlyszh }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="发证日期">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-date-picker
                          v-model="editCar.fzrq"
                          value-format="yyyy-M-d"
                          type="date"
                          size="mini"
                          class="datePicker"
                          placeholder="选择日期">
                        </el-date-picker>
                      </div>
                      <div v-else>{{ activeCar.fzrq }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="年审日期">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-date-picker
                          v-model="editCar.nsrq2"
                          value-format="yyyy-M-d"
                          type="date"
                          size="mini"
                          class="datePicker"
                          placeholder="选择日期">
                        </el-date-picker>
                      </div>
                      <div v-else>{{ activeCar.nsrq2 }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="运输证有效期">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-date-picker
                          v-model="editCar.yszyxq"
                          value-format="yyyy-M-d"
                          type="date"
                          size="mini"
                          class="datePicker"
                          placeholder="选择日期">
                        </el-date-picker>
                      </div>
                      <div v-else>{{ activeCar.yszyxq }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="需换新证">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.xhxz" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.xhxz }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="使用性质">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.syxz" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.syxz }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="经营范围">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.jyfw" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.jyfw }}</div>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
              <el-row  style="padding-top:0px">
                <div class="car-detail-title">
                  车辆配置及主要技术参数
                </div>
                <el-form :inline="true" class="demo-form-inline">
                  <!-- <el-col :span="8">
                    <el-form-item label="车辆类型">
                      {{ activeCar.cllx }}
                    </el-form-item>
                  </el-col> -->
                  <el-col :span="8">
                    <el-form-item label="厂牌">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.cp" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.cp }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="制造厂名">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.zzcm" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.zzcm }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="出厂日期">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-date-picker
                          v-model="editCar.ccrq"
                          value-format="yyyy-M-d"
                          type="date"
                          size="mini"
                          class="datePicker"
                          placeholder="选择日期">
                        </el-date-picker>
                      </div>
                      <div v-else>{{ activeCar.ccrq }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="国产/进口">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.gcjk" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.gcjk }}</div>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
              <el-row>
                <el-form :inline="true" class="demo-form-inline">
                  <el-col :span="8">
                    <el-form-item label="车辆型号">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.clxh" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.clxh }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="VIN(或车架)号">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.vinhcjh" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.vinhcjh }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="底盘型号">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.dpxh" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.dpxh }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="车辆尺寸(长X宽X高)(mm)">
                      <div v-if="editVisi && activeCar.id == editCar.id" style="line-height:56px">
                        <el-input size="mini" v-model="editCar.clcc" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.clcc }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="货箱内尺寸或容积(mm)">
                      <div v-if="editVisi && activeCar.id == editCar.id" style="line-height:56px">
                        <el-input size="mini" v-model="editCar.hxlcchrj" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.hxlcchrj }}</div>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
              <el-row>
                <el-form :inline="true" class="demo-form-inline">
                  <el-col :span="8">
                    <el-form-item label="总质量(kg)">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.zzl" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.zzl }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="整备质量(kg)">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.zbzl" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.zbzl }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="核定载质量(kg)">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.hdzzl" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.hdzzl }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="准牵引质量(kg)">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.zqyzl" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.zqyzl }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="吨位">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.dw" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.dw }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="核定载客(人)">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.hdzk" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.hdzk }}</div>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
              <el-row>
                <el-form :inline="true" class="demo-form-inline">
                  <el-col :span="8">
                    <el-form-item label="发动机号码">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.fdjhm" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.fdjhm }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="发动机型号">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.fdjxh" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.fdjxh }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="发动机功率(kw)">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.fdjgl" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.fdjgl }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="发动机排量(L)">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.fdjpl" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.fdjpl }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="排放标准">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.pfbz" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.pfbz }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="电池类型">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.dclx" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.dclx }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="驱动电机型号">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.qddjxh" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.qddjxh }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="驱动电机功率">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.qddjgl" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.qddjgl }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="动力类型">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.dllx" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.dllx }}</div>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
              <el-row>
                <el-form :inline="true" class="demo-form-inline">
                  <el-col :span="8">
                    <el-form-item label="车轴数量">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.czsl" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.czsl }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="轴距(mm)">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.zj" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.zj }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="前轮距">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.qlj" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.qlj }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="后轮距">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.hlj" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.hlj }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="钢板弹簧片数">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.gbthps" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.gbthps }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="轮胎数">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.lts" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.lts }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="轮胎规格">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.ltgg" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.ltgg }}</div>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
              <el-row>
                <el-form :inline="true" class="demo-form-inline">
                  <el-col :span="8">
                    <el-form-item label="行车制动方式">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.xczdfs" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.xczdfs }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="制动器形式">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.zdqxs" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.zdqxs }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="有/无ABS(制动防抱死系统)">
                      <div v-if="editVisi && activeCar.id == editCar.id" style="line-height:56px">
                        <el-input size="mini" v-model="editCar.ywabs" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.ywabs }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="变速器型式">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.bsqxs" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.bsqxs }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="缓速器">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.hsq" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.hsq }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="空调系统">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.ktxt" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.ktxt }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="卫星定位装置">
                      <div v-if="editVisi && activeCar.id == editCar.id">
                        <el-input size="mini" v-model="editCar.wxdwzz" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.wxdwzz }}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="16">
                    <el-form-item label="备注">
                      <div v-if="editVisi && activeCar.id == editCar.id" style="width:320%">
                        <el-input size="mini" v-model="editCar.bz" placeholder="请输入内容"></el-input>
                      </div>
                      <div v-else>{{ activeCar.bz }}</div>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </div>
      <div v-if="activeCar.id" class="img-container">
        <div class="upload-scrollYcontainer">
          <div class="upload-scrollbox" :style="{height: (activeImgList.length+1) * 188 + 'px'}">
            <div class="upload-container">
              <imgUpload :id="activeCar.id" type="car" @success="getImgList"/>
            </div>
            <div v-for="(item, index) in activeImgList" :key="item.path" class="upload-container">
              <div class="upload-title">{{index +1}}&nbsp;&nbsp;{{ item.bz }}</div>
              <div class="upload-pic-box">
                <img :src="item.path" alt="" @click="$imageViewer">
              </div>
              <i class="el-icon-delete upload-del" @click.stop="imgDel(item.name)"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import adapter from './adapter'
import imgUpload from '@/components/imgUpload'
import excelUpload from '@/components/excelUpload'
import {baseUrl} from '@/utils/baseUrl'
export default {
  name: 'carinfo',
  filters: {
  },
  components: {
    imgUpload,
    excelUpload,
  },
  data() {
    return {
      ...adapter.data,
      tabIndex: 1, // tab序号
      uploadUrl: baseUrl+'/vehicleBasicInfo/importExcel/n',
      fileList: [],
    }
  },
  computed: {
    ...adapter.computed
  },
  created() {
    // 初始化
    this.initPage()
    this.getListCp()
    this.getListCartype()
    this.search()
    // Promise.all([this.getlistDept(), this.getlistTeam()]).then (() => {
    //   this.search()
    // })
  },
  mounted() {
  },
  methods: {
    ...adapter.methods,
    /**
     * 跳转车辆/员工信息
     */
    jumpInfo(tabIndex) {
      console.log(tabIndex)
      if (tabIndex == 2) {
        this.$router.push('staffinfo')
      }
    },
  }
}
</script>
<style lang="scss">
.carInfo-container .img-container{
  padding-top: 82px !important;
}
.carInfo-container .car-container .car-detail .el-form-item__label{
  width: 120px !important;
  text-align: center;
  line-height: 12px;
  padding: 15px 5px !important;
  background: #cccccc !important;
  margin-right: 20px;
}
.car-detail .el-row:nth-child(1){
  padding-top: 0px;
}
.label_img:hover+.el-button{
  background: rgba(0, 0, 102, 1);
} 
.car-detail .el-input{
  width: 200px !important;
  height: 44px !important;
  line-height: 44px !important;
}
.car-detail .el-date-editor.el-input.datePicker{
  width: 200px !important;
}
.car-detail .el-input .el-input__inner{
  
}
</style>
<style lang="scss" scoped>
.carInfo-container{
  padding:0px 170px 30px 50px;
  position: relative;
  .car-container{
    .car-detail{
      margin-top: 20px;
      padding: 10px;
      background-color: #fff;
      .car-detail-title{
        text-align: center;
        background-color: rgba(0, 0, 102, 1);
        margin-bottom: 20px;
        color: #fff;
        padding: 5px 0;
        font-size: 16px;
      }
      /deep/.el-row:nth-of-type(odd){
        background-color: #FFFFCC;
        padding-top: 20px;
      }
      /deep/.el-row:nth-of-type(even){
        background-color: #6CCFFF;
        padding-top: 20px;
      }
      /deep/.el-form-item__label{
        font-size: 12px;
        padding: 0 5px;
        background-color: rgba(121, 121, 121, 1);
        color: black;
        border: 1px solid black;
      }
      /deep/.el-form-item__content{
        font-size: 12px;
      }
      // /deep/.el-row:nth-of-type(even){
      //   .el-form-item__label{
      //     background-color: rgba(204, 204, 102, 1);
      //   }
      // }
      // /deep/.el-row:nth-of-type(2){
      //   .el-form-item__label{
      //     background: none;
      //   }
      // }
    }
  }
  .img-container{
    width: 170px;
    height: 800px;
    padding-top: 100px;
    position: absolute;
    right: 0;
    top: 0;
  }
}
.el-input-number{
  width: 90px;
}
.car-detail-title{
  font-size: 30px;
  text-align: center;
}
.radios-box{
  padding: 20px 0 10px 20px;
}
</style>

